;
(function ($) {
    class scale {
        constructor() {
            this.spic = $('#spic');
            this.bpic = $('#bpic');
            this.sf = $('#sf');
            this.bf = $('#bf');
            this.wrap = $('.wrap');
            this.listli = $('#list li');
            this.left = $('#left');
            this.right = $('#right');
            this.listul = $('#list ul');
        }
        init() {
            let _this = this;
            this.spic.hover(function () {
                _this.showscale();
                $(this).on('mousemove', function (e) {
                    _this.spicmove(e);
                });
                //求小放大镜的尺寸和比例
                _this.sfsize();
            }, function () {
                _this.hidescale();
            });
            //获取不同的图片路径，传给小图和大图的
            this.listli.on('click', function () {
                let $imgurl = $(this).find('img').attr('src');
                _this.spic.find('img').attr('src', $imgurl);
                _this.bpic.attr('src', $imgurl);
            });

            //小图切换
            this.num = 6; //可视的li的length
            this.liwidth = this.listli.eq(0).outerWidth(true);
            this.right.on('click', function () {
                _this.rightclick();
            });

            this.left.on('click', function () {
                _this.leftclick();
            });
        }

        rightclick() {
            if (this.listli.length > this.num) { //所有Li的长度和可视的li的个数进行。
                this.num++;
                this.left.css('color', '#333');
                if (this.num == this.listli.length) {
                    this.right.css('color', '#fff');
                }
            }
            this.listul.animate({
                left: -(this.num - 6) * this.liwidth
            });
        }

        leftclick() {
            if (this.num > 6) { //所有Li的长度和可视的li的个数进行。
                this.num--;
                this.right.css('color', '#333');
                if (this.num == 6) {
                    this.left.css('color', '#fff');
                }
            }
            this.listul.animate({
                left: -(this.num - 6) * this.liwidth
            });
        }

        sfsize() {
            //求小放的尺寸
            this.sf.css({
                width: this.spic.width() * this.bf.width() / this.bpic.width(),
                height: this.spic.height() * this.bf.height() / this.bpic.height()
            });
            //求比例：
            this.bili = this.bpic.outerWidth() / this.spic.outerWidth();
        }

        showscale() {
            this.sf.css('visibility', 'visible');
            this.bf.css('visibility', 'visible');
        }

        hidescale() {
            this.sf.css('visibility', 'hidden');
            this.bf.css('visibility', 'hidden');
        }

        spicmove(e) {
            let l = e.pageX - this.wrap.offset().left - this.sf.width() / 2;
            let t = e.pageY - this.wrap.offset().top - this.sf.height() / 2;
            if (l <= 0) {
                l = 0;
            } else if (l >= this.spic.outerWidth() - this.sf.outerWidth() - 2) {
                l = this.spic.outerWidth() - this.sf.outerWidth() - 2;
            }

            if (t <= 0) {
                t = 0;
            } else if (t >= this.spic.outerHeight() - this.sf.outerHeight() - 2) {
                t = this.spic.outerHeight() - this.sf.outerHeight() - 2;
            }

            this.sf.css({
                left: l,
                top: t,
            });

            //给大图赋值位置
            this.bpic.css({
                left: -l * this.bili,
                top: -t * this.bili
            })
        }
    }

    new scale().init();
})(jQuery);